<template>
  <div class="main">
    <gl-title :titleSize="titleSize" :is_mt="is_mt" ></gl-title>



    <div class="empty db" v-show="emptyShow">
      <div class="flex">
        <img src="../../assets/images/none.png" alt="">
        <span>{{$t('toast.no_data')}}</span>
      </div>
    </div>



    <div class="container" v-if="!emptyShow">
      <div class="list">
        <div class="it db" v-for="(item,k) in datainfo.messageVos" :key="k" @click="ck(item.messageGroupId,item.messageType,item.messageTypeName)">
            <div class="ico rel">
              <span class="abs" v-if="item.messageIsNotReadCount !== 0 && item.messageIsNotReadCount < 99">{{item.messageIsNotReadCount}}</span>
              <span class="abs" v-if="item.messageIsNotReadCount > 99">99+</span>
 

              <img v-lazy="item.headImage" alt="">
            </div>
            <div class="flex">
              <div class="t db">
                <h5 class="flex">{{item.messageTypeName}}</h5>
                <div class="time">{{item.lastReceivedTime}}</div>
              </div>
              <div class="p line_2x">
                {{item.context}}
              </div>
            </div>
          </div>
      </div>
    </div>


  </div>
</template>
<script>
  import { mapActions } from "vuex";


  export default {
    data(){
      return {
        titleSize:this.$t('title.my_news') ,
        is_mt:true,
        datainfo:[],
        emptyShow:false
      }
    },


    mounted() {
      this.Get_userData();
      this.getinfo()
      this.titleSize = this.$store.state.message > 0 ? this.$t('title.my_news') + "(" + this.$store.state.message + ")" : this.$t('title.my_news')

    },
    methods: {
      ...mapActions(["Get_userData"]),

      getinfo(){
        this.$post(this.URL.member.messageAll, {
        }).then((res) => {

          if (res.code == 0) {
            this.datainfo = res.data;
            if(!this.common.isArray(res.data.messageVos)){
              this.emptyShow = true
              return;
            }
            if(res.data.messageVos.length < 1){
              this.emptyShow = true
              return;
            }
            this.emptyShow = false
          } else {
            // this.$toast(res.message);
            this.emptyShow = true
          }
        });
      },
      ck(id,type,name){
        this.$router.push({
          path: "/member/my_news_view",
          query: {
            id: id,
            type:type,
            name:name
          }
        });
      }

    },


  }

</script>


<style lang="less" scoped>
  #app {
    .list {
      .it {
        .ico {
          width: .92rem;
          height: .92rem;
          border-radius: 50%;
          margin-right: .26rem;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
          span {
            display: block;
            min-width: .32rem;
            padding: 0 .1rem;
            height: .32rem;
            background: #f53831;
            box-shadow: 0px .04rem .08rem 0px rgba(245,56,49,0.31);
            border-radius: .16rem;
            color: #ffffff;
            font-size: .22rem;
            right: 0;top:0
          }
        }
        > .flex {
          padding: .4rem 0;
          border-bottom: .02rem solid #F4F5F9;
          .t {
            h5 {
              height: .42rem;
              font-size: .3rem;
              font-weight: 500;
              color: #222222;
              line-height: .42rem;
            }
            .time {
              font-size: .22rem;
              font-weight: 400;
              color: #999999;
            }
          }
          .p {
            margin-top: .1rem;
            font-size: .26rem;
            font-weight: 400;
            color: #999999;
            line-height: .36rem;
          }
        }
      }
    }
  }
</style>
